<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center zxjclist_flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub zxjclist_fd0_0_higd'>
					<view class='flex flex-wrap align-center zxjclist_fd0_0_c0_higd' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  zxjclist_fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='zxjclist_fd0_0_c1_c0_higd'>{{$t('专项检查')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end zxjclist_fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center">
				<view class="tabsfixd" :style="{top:(88+StatusBarRpx)+'rpx' }">
					<benben-flex-tabs class-name='zxjclist_benbenTabsfd1_0_higd' v-model="tabsTypefd1_0"
						ref="benben_tabsfd1_0" select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0"
						:open-title-type='false' :open-sticky='false' :top='0' :is-show-content='false'
						:scrollspy='false' :tabs-info.sync="tabsInfofd1_0" v-if=" type=='1'">

						<scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
							class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd1_0.moveX"
							scroll-with-animation="all .3s ease" :show-scrollbar='false' :enhanced="true">
							<view class="benben-tabs-content" id="benben_tabsfd1_0-content">
								<view id="benben_tabsfd1_0-title"
									class="benben-tabs-title flex flex align-center justify-around">
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '1', 'flex flex-wrap align-center': true }"
										@tap="tabsTypefd1_0 = '1'" :id="`benben_tabsfd1_0-title-item-${'1'}`">

										<text @tap="checktypeFunc(1)">{{$t('我的检查')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '2', 'flex flex-wrap align-center': true }"
										@tap="tabsTypefd1_0 = '2'" :id="`benben_tabsfd1_0-title-item-${'2'}`">

										<text @tap="checktypeFunc(2)">{{$t('我的整改')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '3', 'flex flex-wrap align-center': true }"
										@tap="tabsTypefd1_0 = '3'" :id="`benben_tabsfd1_0-title-item-${'3'}`">

										<text @tap="checktypeFunc(3)">{{$t('我的审核')}}</text>

									</view>
								</view>
								<view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
									id="benben_tabsfd1_0-line"
									class="benben-tabs-line flex benben-flex-tabs-line zxjclist_linefd1_0_higd"
									:class="{'benben-tabs-line-active':tabsInfofd1_0.isInit}"></view>
							</view>
						</scroll-view>

					</benben-flex-tabs>

				</view>
				<view class="tabsfixd tabfix" :style="{top:(176+StatusBarRpx)+'rpx' }">
					<view class='flex flex-wrap align-center zxjclist_fd1_1_higd' v-if=" tabsTypefd1_0=='1'">
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(0)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd' v-if=" nav==0">{{$t('全部')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!=0">{{$t('全部')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(1)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='1'">{{$t('待检查')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='1'">{{$t('待检查')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(2)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='2'">{{$t('检查中')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='2'">{{$t('检查中')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(3)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='3'">{{$t('已完成')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='3'">{{$t('已完成')}}</text>
						</view>
					</view>
					<view class='flex flex-wrap align-center zxjclist_fd1_1_higd' v-if=" tabsTypefd1_0=='2'">
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(0)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd' v-if=" nav==0">{{$t('全部')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!=0">{{$t('全部')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(1)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='1'">{{$t('待整改')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='1'">{{$t('待整改')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(2)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='2'">{{$t('整改中')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='2'">{{$t('整改中')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(3)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='3'">{{$t('已完成')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='3'">{{$t('已完成')}}</text>
						</view>
					</view>
					<view class='flex flex-wrap align-center zxjclist_fd1_1_higd' v-if=" tabsTypefd1_0=='3'">
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(0)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd' v-if=" nav==0">{{$t('全部')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!=0">{{$t('全部')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(1)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='1'">{{$t('待审核')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='1'">{{$t('待审核')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(2)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='2'">{{$t('审核中')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='2'">{{$t('审核中')}}</text>
						</view>
						<view class='flex flex-direction align-center self-center justify-center zxjclist_fd1_1_c0_higd'
							@tap.stop="checknavFunc(3)">
							<text class='self-center zxjclist_fd1_1_c0_c0_higd'
								v-if=" nav=='3'">{{$t('已完成')}}</text><text
								class='self-center zxjclist_fd1_1_c0_c0_1_higd' v-if=" nav!='3'">{{$t('已完成')}}</text>
						</view>
					</view>

				</view>
				<view class='flex flex-direction align-stretch zxjclist_fd1_4_higd'
					>
					<template v-for='(item,key0) in dataList'>
						<view class='flex flex-direction align-stretch zxjclist_fd1_4_c0_higd'
							@tap.stop="goinfoFunc(item)" :key='key0'>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c0_higd'>
								<text class='zxjclist_fd1_4_c0_c0_c0_higd'>{{$t('专项检查任务编号')}}</text>
								<text v-if=" tabsTypefd1_0=='1'">{{item.zxrwbh}}</text><text
									v-if=" tabsTypefd1_0=='2' || tabsTypefd1_0=='3'">{{item.zxjcrw_zxrwbh}}</text>
							</view>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c0_higd'>
								<text class='zxjclist_fd1_4_c0_c0_c0_higd'>{{$t('任务执行时间')}}</text>
								<text>{{item.rw_start_time}}</text>
							</view>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c0_higd'>
								<text class='zxjclist_fd1_4_c0_c0_c0_higd'>{{$t('所属模板')}}</text>
								<text v-if=" tabsTypefd1_0=='1'">{{item.jcmb_zxmc}}</text><text
									v-if=" tabsTypefd1_0=='2' || tabsTypefd1_0=='3'">{{item.jcmb_zxmc}}</text>
							</view>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c0_higd'>
								<text class='zxjclist_fd1_4_c0_c0_c0_higd'>{{$t('所属计划')}}</text>
								<text>{{item.zxjc_zxjhmc}}</text>
							</view>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c4_higd'
								v-if=" tabsTypefd1_0=='1'">
								<text class='zxjclist_fd1_4_c0_c4_c0_higd'
									v-if=" item.rwzt=='1'">{{$t('待检查')}}</text><text
									class='zxjclist_fd1_4_c0_c4_c0_higd'
									v-if=" item.rwzt=='2'">{{$t('检查中')}}</text><text
									class='zxjclist_fd1_4_c0_c4_c0_higd' v-if=" item.rwzt=='3'">{{$t('已完成')}}</text>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"102.png"'
									v-if=" item.rwzt=='1'"></image>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"103.png"'
									v-if=" item.rwzt=='2'"></image>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"104.png"'
									v-if=" item.rwzt=='3'"></image>
							</view>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c4_higd'
								v-if=" tabsTypefd1_0=='2'">
								<text class='zxjclist_fd1_4_c0_c4_c0_higd'
									v-if=" item.zg_status=='1'">{{$t('待整改')}}</text><text
									class='zxjclist_fd1_4_c0_c5_c0_1_higd'
									v-if=" item.zg_status=='2'">{{$t('整改中')}}</text><text
									class='zxjclist_fd1_4_c0_c5_c0_1_higd'
									v-if=" item.zg_status=='3'">{{$t('已完成')}}</text>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"102.png"'
									v-if=" item.zg_status=='1'"></image>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"103.png"'
									v-if=" item.zg_status=='2'"></image>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"104.png"'
									v-if=" item.zg_status=='3'"></image>
							</view>
							<view class='flex flex-wrap align-center zxjclist_fd1_4_c0_c4_higd'
								v-if=" tabsTypefd1_0=='3'">
								<text class='zxjclist_fd1_4_c0_c4_c0_higd'
									v-if=" item.wtzt=='1'">{{$t('待审核')}}</text><text
									class='zxjclist_fd1_4_c0_c4_c0_higd'
									v-if=" item.wtzt=='2'">{{$t('审核中')}}</text><text
									class='zxjclist_fd1_4_c0_c4_c0_higd' v-if=" item.wtzt=='3'">{{$t('已完成')}}</text>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"102.png"'
									v-if=" item.status=='1' || item.wtzt=='1'"></image>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"103.png"'
									v-if=" item.status=='2' || item.wtzt=='2'"></image>
								<image class='zxjclist_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='STATIC_URL+"104.png"'
									v-if=" item.status=='3' || item.wtzt=='3'"></image>
							</view>
						</view>
					</template>
					<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
						:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},
		mixins: [pagingList],

		data() {
			return {
				"tabsInfofd1_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0,
					isInit: false
				},
				/** tabsTypefd1_0【1检查2整改3审核】 **/
				"tabsTypefd1_0": "1",
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"dataList": [],
				/** type【1评估2检查3排查】 **/
				"type": "1",
				/** is_collection【是否关注或点赞 0 否 1 是】 **/
				"dataBack": {
					"is_collection": ""
				},
				/** nav【状态】 **/
				"nav": "0",
				"page": "1",
				/** id【选中id】 **/
				"id": ""
			};
		},
		computed: {
			isLogin() {
				return uni.getStorageSync('USER_TOKEN_7863') == '' ? false : true;
			}
		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getlistFunc()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.getlistFunc()
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取列表
			getlistFunc() {
				if (this.tabsTypefd1_0 == '1') {
					this.getas73d826057306Func()
				} else if (this.tabsTypefd1_0 == '2') {
					this.getki73d9887bc2b4Func()
				} else if (this.tabsTypefd1_0 == '3') {
					this.getia73da532532fcFunc()
				}
			},
			//切换状态nav
			checknavFunc(key) {
				this.nav = key;
				this.getlistFunc()
			},
			//切换类型tabsTypefd1_0
			checktypeFunc(key) {
				this.tabsTypefd1_0 = key;
				this.getlistFunc()
			},
			//跳转详情
			goinfoFunc(item) {
				console.log(this.tabsTypefd1_0)
				console.log(item)
				if (this.tabsTypefd1_0 == 1) {
					this.id = item.aid
				} else if (this.tabsTypefd1_0 == 2) {
					this.id = item.zxjcrw_id
				} else {
					this.id = item.zxjcrw_id
				}
				console.log(this.id)

				this.$urouter.navigateTo(`/pagezxjc/zxjc/zxjc/zxjc?id=${this.id}&type=${this.tabsTypefd1_0}`);
			},
			//查询我的专项检查任务
			getas73d826057306Func() {
				this.minixPagingListsApi = global.apiUrls.post673d826057306;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					rwzt: this.nav,
					xiaoqu_id:uni.getStorageSync('USER_XQ')
				}
				this.listData = [];
				this.dataList = this.listData;
				this.pagingListToggle();

			},
			//查询专项检查整改列表
			getki73d9887bc2b4Func() {
				this.minixPagingListsApi = global.apiUrls.post673d9887bc2b4;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					wtzt: this.nav,
					xiaoqu_id:uni.getStorageSync('USER_XQ')
				}
				this.listData = [];
				this.dataList = this.listData;
				this.pagingListToggle();

			},
			//查询我的审核列表-专项检查
			getia73da532532fcFunc() {
				this.minixPagingListsApi = global.apiUrls.post673da532532fc;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					wtzt: this.nav,
					xiaoqu_id:uni.getStorageSync('USER_XQ')
				}
				this.listData = [];
				this.dataList = this.listData;
				this.pagingListToggle();

			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
		
		.tabsfixd{
			width: 100%;
			background-color: #fff;
			position: fixed;
			z-index: 5;
		}
		.tabfix{
			background-color: #F8F8F8;
		}
		
		.checkTitlefd1_0_higd {
			font-weight: 700 !important;
			font-size: 28rpx !important;
			color: #D32A29 !important;
			background-color: rgba(255, 255, 255, 1) !important;
		}

		.zxjclist_linefd1_0_higd {
			width: 100rpx;
			height: 8rpx;
			top: 80rpx;
			background: #d53215;
			background-size: 100% auto !important;
		}

		.zxjclist_fd1_1_higd {
			width: 100%;
			padding: 32rpx;
		}

		.zxjclist_fd1_1_c0_higd {
			margin: 0rpx 32rpx 0rpx 0rpx;
		}

		.zxjclist_fd1_1_c0_c0_higd {
			color: var(--benbenFontColor3);
			width: 132rpx;
			height: 64rpx;
			background: rgba(211, 42, 41, 1);
			background-size: 100% auto;
			line-height: 64rpx;
			text-align: center;
			border-radius: 8rpx;
		}

		.zxjclist_fd1_1_c0_c0_1_higd {
			color: rgba(102, 102, 102, 1);
			width: 132rpx;
			height: 64rpx;
			background: rgba(255, 255, 255, 1);
			background-size: 100% auto;
			line-height: 64rpx;
			text-align: center;
			border-radius: 8rpx;
			border: 1px solid #eee;
		}

		.zxjclist_fd1_4_higd {
			width: 100%;
			padding: 0rpx 32rpx 0rpx 32rpx;
			margin-top: 215rpx;
			.zxjclist_fd1_4_c0_higd {
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				border-radius: 16rpx;
				padding: 28rpx 24rpx 0rpx 24rpx;
				color: rgba(51, 51, 51, 1);
				position: relative;
				margin: 0rpx 0rpx 16rpx 0rpx;
			}
		}

		.zxjclist_fd1_4_c0_c0_higd {
			line-height: 40rpx;
			margin: 0rpx 0rpx 24rpx 0rpx;
		}

		.zxjclist_fd1_4_c0_c0_c0_higd {
			color: rgba(153, 153, 153, 1);
			width: 250rpx;
		}

		.zxjclist_fd1_4_c0_c4_higd {
			position: absolute;
			width: 116rpx;
			height: 48rpx;
			top: 0rpx;
			right: 0rpx;
			z-index: 1;
		}

		.zxjclist_fd1_4_c0_c4_c0_higd {
			color: var(--benbenFontColor3);
			text-align: center;
			width: 116rpx;
			line-height: 48rpx;
			position: absolute;
			z-index: 2;
			font-size: 24rpx;
		}

		.zxjclist_fd1_4_c0_c4_c1_higd {
			width: 116rpx;
			height: 48rpx;
			border-radius: 0rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			font-size: 24rpx;
		}

		.zxjclist_fd1_4_c0_c5_c0_1_higd {
			color: var(--benbenFontColor3);
			text-align: center;
			width: 116rpx;
			line-height: 48rpx;
			position: absolute;
			z-index: 2;
			font-size: 24rpx;
		}

		.zxjclist_flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.zxjclist_fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.zxjclist_fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.zxjclist_fd0_0_c0_higd {
			width: 120rpx;

			.zxjclist_fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

	::v-deep .zxjclist_benbenTabsfd1_0_higd {
		width: 750rpx;
		height: 90rpx;
		white-space: nowrap;
		background: #fff;
		text-align: center;
	}
</style>
